<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义事件——发布订阅模式</title>
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    class EventEmitter {
      constructor() {
        // {'click': [fn1,fn2], 'change':[fn]}
        this.subs = Object.create(null)
      }

      // 注册事件
      $on(eventType, handler) {
        this.subs[eventType] = this.subs[eventType] || []
        this.subs[eventType].push(handler)
      }

      // 触发事件
      $emit(eventType) {
        if (this.subs[eventType]) {
          this.subs[eventType].forEach(handler => {
            handler()
          });
        }
      }
    }
    let em = new EventEmitter()
    em.$on('click', () => {
      console.log('click1');
    })
    em.$on('click', () => {
      console.log('click2');
    })
    em.$emit('click')
    // let vm = new Vue()

    // // 注册时间（订阅消息）
    // vm.$on('dataChange', () => {
    //   console.log('dataChange');
    // })

    // vm.$on('dataChange', () => {
    //   console.log('dataChange1');
    // })

    // // 触发事件（发布消息）
    // vm.$emit('dataChange')
    // // $emit:发布者
    // // $on: 订阅者
  </script>
</body>

</html>